<template>
  <div class="top-box">
    <div class="top-left" @click="handleClick">
      <router-link to="/weather">
        <div class="top-left-item">
          <el-icon><Sunny /></el-icon>
          <p>新中地天气</p>
        </div>
      </router-link>
      <div class="curent-weather">
        <h5>{{ currentIpCityName }}</h5>
        <h6>{{ `实时天气: ${localWeatherInfoCurrent.weather} ${localWeatherInfoCurrent.temperature}℃` }}</h6>
        <h6>{{ `${localWeatherInfoCurrent.winddirection}风${localWeatherInfoCurrent.windpower}级`  }}</h6>
      </div>
    </div>

    <div class="top-right">
      <label for="info" class="top-right-item"
        ><el-icon color="white"> <InfoFilled /> </el-icon
      ></label>
      <el-button plain @click="open" id="info">Info</el-button>
      <slot name="add"></slot>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus"
import { InfoFilled } from "@element-plus/icons-vue"
import { storeToRefs } from "pinia"
import {onMounted} from "vue"
import { useWeatherStore } from "../stores/Weather"
const { state, cityList,localCityList,WeatherInfoCurrent ,localCityAddressList,currentIpCityName,localWeatherInfoCurrent} = storeToRefs(useWeatherStore())
const {getCityname}=useWeatherStore()
// 终于定位到问题了。。。。。
onMounted( () => {
     getCityname();
});



const open = () => {
  ElMessageBox.confirm("", {
    confirmButtonText: "关闭",
    showCancelButton: false,
    showClose: false,
    dangerouslyUseHTMLString: true,
    message: ` <div>
      <h3>关于</h3>
      <p>
        这个应用可以用来追踪你选择城市的当前天气。
      </p>
      <h3>如何使用:</h3>
      <p>
        1.点击搜索框输入你希望追踪的城市
      </p>
      <p>
        2.在搜索结果中选中一个城市，你将获取当地最新的天气
      </p>
      <p>
        3.点击右侧的+号可以将追踪城市的天气情况保存在首页。
      </p>
      <h3>移除城市:</h3>
      <p>
        如果你不想在首页关注某个城市，可以通过底部的按钮删除它。
      </p>
    </div>`,
  })
}
const handleClick = () => {
  state.value = true
  console.log("返回主页面")
}
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  height: 50px;
  width: 100vw;
}
:deep(.router-link-active router-link-exact-active) {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.top-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  color: white;
  font-size: 20px;
  font-weight: 600;
}
.top-left-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.top-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
}
.top-right-item {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    :deep(.el-icon) {
      color: rgb(0, 78, 113);
    }
  }
}

.el-icon {
  font-size: 30px;
  margin-right: 10px;
}
p {
  font-size: 20px;
  font-weight: 600;
}

a {
  text-decoration: none;
  color: white;
}

.router-link-active {
  text-decoration: none;
}
#info {
  display: none;
}
.curent-weather{
  display: flex;
  margin-left: 10px;
  gap: 10px;
}
</style>
